<template>
    <div class="box">
      <el-icon v-show="collapse" @click="changeCollapse"><Expand /></el-icon>
      <el-icon v-show="!collapse" @click="changeCollapse"><Fold /></el-icon>
      <h3>外卖管理系统</h3>
      <el-dropdown split-button type="primary" @command="handlerCommand">
        欢迎：{{ loginInfo.nickname || loginInfo.contact }}
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="personal">个人中心</el-dropdown-item>
            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </template>
  
  <script>
  export default {
    emits: ["change-collapse"],
    props: ['collapse'],
    data() { 
      return {
        loginInfo: {}
      }
    },
    methods: { 
      changeCollapse() { 
        this.$emit("change-collapse");
      },
      handlerCommand(command) {
        switch (command) {
          case "personal":
            this.$router.push("/personal");
            break;
          case "changePassword":
            
            break;
          case "loginOut":
            localStorage.removeItem("loginInfo");
            this.$router.push("/businessLogin");
            break;
        }
      }
    },
    created() { 
      // 从本地存储中获取商家登录的信息
      let info = localStorage.getItem("loginInfo");
      if (!info) {
        this.$router.push("/businessLogin");
        return;
      }
      this.loginInfo = JSON.parse(info);
    }
  };
  </script>
  
  <style scoped>
  .box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
  }
  .box h3{
      font-size: 30px;
      color: #fff;
      letter-spacing: 1em;
  }
  .el-icon{
    color: #fff;
    font-size: 30px;
    cursor: pointer;
  }
  </style>
  